<template>
    <el-dialog title="费用明细" :show-close="false" v-model="expensesDetailDialog" @close="handleRemoveModal(remove)" size="auto" :closeOnClickModal="false">
        <base-input @closedialog="handleClose">
            <el-row slot="body">
                <!--<el-row>
                    <el-button type="primary" class="ok-btn" @click="addHandler">添加新纪录</el-button>
                </el-row>-->
                <el-tabs type="border-card" :active-name='activeName'>
                    <el-tab-pane label="收支详情表">
                        <!--<el-row>
                            收支总额：0
                        </el-row>-->
                        <el-row>
                            <data-list class='data-list light-header' @edit='editHandler' :table-data='dataList1' :header-data='dataHeader1' :column-formatter='listColumnFormatter'></data-list>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="预付款详情表">
                        <el-row>
                            <data-list class='data-list light-header' @edit='editHandler' :table-data='dataList2' :header-data='dataHeader2'></data-list>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="市场费用详情表">
                        <el-row>
                            <data-list class='data-list light-header' @edit='editHandler' :table-data='dataList3' :header-data='dataHeader3'></data-list>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
                <el-row>
                    <el-button type="primary" class="ok-btn" @click="exportHandler">导出</el-button>
                </el-row>
            </el-row>
        </base-input>
    </el-dialog>
</template>
<!-- task_id = 19 -->
<script>
import BaseInput from '../../components/BaseInput'
import UploadPanel from '../../components/UploadPanel'
import Editor from '../../components/Editor'
import BaseList from '../../components/BaseList'

import {
    advance_payment_log,
    amount_detail_log,
    market_cost_log
} from '../../api/modules/dealer'
import {
    RemoveModal
} from './mixins'
import {
    mapActions,
    mapState
} from 'vuex';
import { Loading } from 'element-ui'
import { Config } from '../../config/base'
import {
    reunitPrice,
    doTimeFormat
} from '../../components/Util'
import {
    MPop
} from '../../components/MessagePop'
export default {
    mixins: [RemoveModal, MPop],
    props: {
        remove: {
            type: String
        },
        payload: {}
    },
    data() {
        return {
            expensesDetailDialog: true,
            dataList1: [],
            dataList2: [],
            dataList3: [],
            loadingInstance: null,
            activeName:'0'
        }
    },
    mounted() {
        this.loadingInstance = Loading.service({
            text: '加载中，请稍后',
            fullscreen: true
        });
        var finish1,finish2,finish3 = false;
        amount_detail_log({dealer_id:this.payload,page_index:0,page_size:999}).then(res => {
            if(res.data.res_code === 1)
            {
                this.dataList1 = res.data.msg;
                finish1 = true;
                if(finish1 && finish2 && finish3)
                    this.loadingInstance.close();
            }
        })
        advance_payment_log({dealer_id:this.payload,page_index:0,page_size:999}).then(res => {
            if(res.data.res_code === 1)
            {
                this.dataList2 = res.data.msg;
                finish2 = true;
                if(finish1 && finish2 && finish3)
                    this.loadingInstance.close();
            }
        })
        market_cost_log({dealer_id:this.payload,page_index:0,page_size:999}).then(res => {
            if(res.data.res_code === 1)
            {
                this.dataList3 = res.data.msg;
                finish3 = true;
                if(finish1 && finish2 && finish3)
                    this.loadingInstance.close();
            }
        })
    },
    computed: {
        ...mapState({
            
        }),
        dataHeader1() {
            return [
                {
                label: '序号',
                width: 90,
                sort: true
            },{
                    label: '记账日',
                    prop: 'create_time',
                    width: 150,
                }, {
                    prop: 'description',
                    label: '摘要'
                }, {
                    prop: 'order_guid',
                    label: '相关订单',
                    width: 100
                }, {
                    prop: 'price',
                    label: '金额',
                    width: 100
                }, {
                    prop: 'income_desc',
                    label: '收入类型',
                    width: 120
                }, {
                    prop: 'expenditure_desc',
                    label: '支出类型',
                    width: 120
                }, {
                    prop: 'more',
                    label: '备注',
                    width: 150
                // }, {
                //     label: '操作',
                //     width: 120,
                //     groupBtn: [{
                //         text: '编辑',
                //         param: 'edit'
                //     }]
                }]
        },
        dataHeader2() {
            return [
                {
                label: '序号',
                width: 90,
                sort: true
            },{
                    label: '使用前金额',
                    prop: 'before_amount',
                    width: 150,
                }, {
                    prop: 'after_amount',
                    label: '使用后金额',
                    width:150
                }, {
                    prop: 'value',
                    label: '使用后金额',
                    width:150
                }, {
                    prop: 'description',
                    label: '描述'
                // },  {
                //     label: '操作',
                //     width: 120,
                //     groupBtn: [{
                //         text: '编辑',
                //         param: 'edit'
                //     }]
                }]
        },
        dataHeader3() {
            return [
                {
                label: '序号',
                width: 90,
                sort: true
            },{
                    label: '使用前金额',
                    prop: 'before_amount',
                    width: 150,
                }, {
                    prop: 'after_amount',
                    label: '使用后金额',
                    width:150
                }, {
                    prop: 'value',
                    label: '使用后金额',
                    width:150
                }, {
                    prop: 'description',
                    label: '描述'
                // },  {
                //     label: '操作',
                //     width: 120,
                //     groupBtn: [{
                //         text: '编辑',
                //         param: 'edit'
                //     }]
                }]
        },
        listColumnFormatter(){
            return [
                {
                    columnName:'create_time',
                    doFormat:doTimeFormat
                }
            ]
        }
    },
    methods: {
        ...mapActions([
            
        ]),
        handleClose() {
            this.expensesDetailDialog = false;
        },
        addHandler(formName) {
           
        },
        editHandler(){

        },
        exportHandler() {

        }
    },
    components: {
        'base-input': BaseInput,
        'upload-panel': UploadPanel,
        'text-editor': Editor,
        'data-list': BaseList,
    },
}

</script>
<style lang="scss">
#expenses-detail-container {
    @import "base.scss";
    input,
    textarea {
        resize: none;
        outline: none;
    }
    .close-dialog-panel {
        position: absolute;
        top: -40px;
        right: 13.5px;
        z-index: 99999;
        font-size: 30px;
        cursor: pointer;
        &:before {
            // color: #fff;
            color: #757575;
        }
    }
    .el-dialog {
        width: 1000px;
        background: none;
        .body-top {
            padding-bottom: 10px;
        }
        .el-dialog__header {
            background: #333333;
            border-radius: 4px 4px 0 0;
            padding: 16px;
        }
        .el-dialog__body {
            padding: 0;
            background: #fff;
            border-radius: 0 0 4px 4px;
        }
        .ok-btn {
            background: #FB843E;
            border-radius: 4px;
            width: 200px;
            height: 36px;
            border: 0;
            margin: 30px 0;
        }
    }
}
</style>